<template>
  <div class="wrapper">
    <el-table
      :data="list"
      size="mini"
      border
      style="width: 100%"
      v-loading="isLoading"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column
        label="名称"
        :formatter="nameFormatter"
      ></el-table-column>
      <el-table-column prop="value" label="值"></el-table-column>
      <el-table-column prop="version" label="最大版本限制"></el-table-column>
      <el-table-column
        label="修改时间"
        :formatter="timeFormatter"
      ></el-table-column>
      <el-table-column prop="operator" label="修改人"></el-table-column>
      <el-table-column prop="note" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="400px">
      <el-form
        label-position="left"
        label-width="120px"
        :model="currentRow"
        :rules="rules"
        ref="editForm"
        size="mini"
      >
        <el-form-item prop="value" label="值" size="mini">
          <el-input
            v-model="currentRow.value"
            placeholder="请输入数字"
          ></el-input>
        </el-form-item>
        <el-form-item prop="version" label="最大版本限制">
          <el-input
            v-model="currentRow.version"
            placeholder="低于或等于此版本时生效"
          ></el-input>
        </el-form-item>
        <el-form-item prop="note" label="备注">
          <el-input v-model="currentRow.note"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="handleSubmit"
          :loading="isSubmiting"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchQuerySetting } from "@/api";
import dateFormat from "dateformat";

export default {
  name: "OperationConfig",
  data() {
    return {
      list: [],
      isLoading: false,
      nameList: [
        "",
        "开启所有分享",
        "邀请有礼",
        "天降红包",
        "每日签到的广告",
        "分享解锁新功能开关",
        "新玩家默认创造豆",
      ],

      dialogVisible: false,
      currentRow: {},
      rules: {
        value: [{ required: true, message: "请输入值" }],
        version: [{ required: true, message: "请输入版本" }],
        note: [{ required: true, message: "请输入备注" }],
      },
      isSubmiting: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getQuerySetting();
    },
    async getQuerySetting() {
      try {
        this.isLoading = true;
        const res = await fetchQuerySetting();
        this.isLoading = false;

        console.log(res);
        this.list = res.data;
      } catch (error) {
        this.isLoading = false;
      }
    },
    timeFormatter({ operate_time }) {
      return dateFormat(operate_time * 1000, "yyyy-mm-dd hh:MM");
    },
    nameFormatter({ type }) {
      return this.nameList[type];
    },
    handleEdit({ row }) {
      // 显示弹窗
      this.dialogVisible = true;

      this.currentRow = { ...row };
    },
    handleSubmit() {
      if (this.isSubmiting) return;

      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.isSubmiting = true;
          // TODO - 发送请求

          // 模拟编辑请求成功
          setTimeout(() => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
            });

            this.dialogVisible = false;
            this.isSubmiting = false;

            this.init();
          }, 1000);
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>